<template>
  <view class="page custom-page">
    <custom-head gradient back title="添加积分"></custom-head>

    <view class="content">
      <view class="top_text">点击头像可修改单个学员的积分</view>
      <view class="avatars">
        <view class="avatars_item" v-for="(item, index) in studentsList" @click="handleRevise(item, index)">
            <image class="img" :src="item.avatar" mode="widthFix"/>
            <view class="text_count">+{{ item.sum }}</view>
            <view class="text_name">{{ item.name }}</view>
        </view>
      </view>

    </view>


    <u-popup class="bao_content" v-model="showPopup" mode="bottom">
      <view class="popup_content">
        <view class="top">
          <image class="img" :src="selectStudent.avatar" mode="widthFix"/>
          <view class="text_name">学员 : {{ selectStudent.name }}</view>
        </view>
      </view>

      <view class="swiper">
        <u-tabs-swiper 
          ref="tabs" 
          :list="tabsList" 
          :current="current"
          :is-scroll="false" 
          @change="tabsChange">
        </u-tabs-swiper>

        <view class="line"></view>

        <swiper class="bao_swiper" :current="swiperCurrent">
          <swiper-item class="swiper-item" v-if="studentsList.length">
            <scroll-view scroll-y >
              <view class="swiper-div">

                <view class="swiper_item" v-for="(item, index) in dailyList" :key="index">
                  <view class="item_left">
                    <view>
                      <image class="img" :src="item.icon" mode="widthFix"/>
                    </view>
                    <view class="text">{{ item.title }}</view>
                    <view class="round">+{{ item.count }}</view>
                  </view>

                  <view>
                    <u-checkbox 
                      @change="checkboxChange(index)" 
                      v-model="item.checked" 
                      shape="circle"
                    ></u-checkbox>
                  </view>
                </view>

              </view>
            </scroll-view>
          </swiper-item>

          <swiper-item class="swiper-item" style="background-color: #f3f4f5; overflow: auto;">
            <scroll-view scroll-y >
              <view class="swiper-div bao_swiper_item">
                
                <view class="item" @click="handlePopup" v-for="(item, index) in treasureBoxList">

                  <view class="item_left">
                    <view ><image class="image" :src="item.img" mode="widthFix" /></view>
                    <view class="info">
                      <view class="title ">
                        <view class="label">{{ item.name }}</view>
                      </view>
                      <p class="red">赠送积分: {{ item.points }}</p>
                    </view>
                  </view>
                  <view class="item_right">
                    累计: {{ item.total }} 个<u-icon name="arrow-right" color="#8F9399" size="32"></u-icon>
                  </view>

                  </view>

              </view>
            </scroll-view>
          </swiper-item>

        </swiper>


      </view>

      <view class="popup_btn">
        <u-button class="btn" type="primary" @click="handleClose">确定 (共 +{{countCmp}}积分)</u-button>
      </view>
    </u-popup>


    <view class="buttom_btn">
      <view class="flex" v-if="showBtn">
        <view class="text">合计总积分: {{ SumCmp }} </view>
        <u-button class="btn" type="primary" @click="handleNext">确定批量添加</u-button>
      </view>
      <u-button v-else class="btn" type="primary" @click="showBtn = true">下一步</u-button>
    </view>

  </view>
</template>
<script>
// import { getScore } from '../../api/modules/score';
import { addScore_history } from '../../api/modules/score_history';
import { getTreasure } from '../../api/modules/treasure';
export default {
  data() {
    return {
      showBtn: false, // 是否确认批量添加
      showPopup : false, // 是否显示弹出框
      studentsList: [], // 页面数据
      current: 0, // tabs组件的current值，表示当前活动的tab选项
      swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
      tabsList: [{  // tabs 
					name: '日常积分'
				}, {
					name: '成长宝箱积分'
			}],
      dailyList: [],
      selectStudent: {}, // 选中的那个学生
      selectIndex: 0, // 选中的 学生的index
      treasureBoxList: [], // 成长宝箱积分
      static_uri: getApp().globalData.glb_list.config.static_uri, // 获取全局配置文件
    }
  },
  onUnload() {
    getApp().globalData.selectStudentList = [];
  },

  mounted() {
    this.studentsList = JSON.parse(JSON.stringify
    (getApp().globalData.selectStudentList))
    this._getTreasure()
    // console.log('---', getApp().globalData?.glbCurrentDataMap?.id)
    // this._getScore();
  },
  computed: {
    countCmp: function () {
      let arr = []
      for(let item of this.dailyList) {
        if (item.checked) {
          arr.push(item.count)
        }
      }
      return arr.reduce((pre, i) => {
        return pre + i
      }, 0)
    },
    SumCmp: function() {
      return this.studentsList.reduce((pre, cur) => pre + cur.sum, 0)
    }
  },

  methods: {
    handleNext(){ // 批量添加积分
      // console.log('下一步', this.studentsList)
      let arr = JSON.parse(JSON.stringify(this.studentsList))
      let addScoreList = [];
      
      for(let i=0; i<arr.length; i++) {
        for(let j=0; j<arr[i]?.integral.length; j++) {
          if (arr[i].integral[j].checked) {
            // console.log('李米娜', arr[i].integral[j])
            // console.log('090909', arr[i])
            let data = {
              sid: arr[i].integral[j].sid,
              score_id: arr[i].integral[j].id,
              desc: arr[i].integral[j].desc,
              cnt: arr[i].integral[j].cnt,
              to: arr[i].id,
              from: getApp().globalData?.glbCurrentDataMap?.id, // from表示谁发的积分 ，一般是当前登录id
            }
            addScore_history(data).then(res=> {
              const { code } = res || {};
              if(code === 201) {
                uni.navigateTo({
                  url: '/pages/home/home'
                })
              }
            })
            addScoreList.push(data)
          }
        }
      }
      
      console.log('查看有几个符合要求', addScoreList)
    },
    handleRevise(param, index) {
      this.selectStudent = param;
      this.selectIndex = index
      this.dailyList = param.integral
      // this.dailyList = this.studentsList.map(i => ({...i, checked: integralId.includes(i.id)}))
      this.showPopup = true;
    },
    tabsChange(index) {  // tabs 切换的方法
      console.log('index', index)
      this.current = index
      this.swiperCurrent = index;
    },

    handleClose() {
      this.showPopup = false
      this.studentsList = this.studentsList.map(i => ({...i, sum: i.integral.filter(j => j.checked).reduce((pre, cur) => pre + cur.cnt, 0)}))
    },
    // 选中某个复选框时，由checkbox时触发
		checkboxChange(index) {
      // this.studentsList[this.selectIndex].integral = this.dailyList
			console.log(index, '000', this.dailyList);
		},

    _getTreasure() {  // 宝箱管理的页面数据
				getTreasure({
          page_no: 1,
          page_size: 10000,
        }).then((res) => {
					const { code, data } = res || {};
					let newList = [];
					if (code === 200) {
            // console.log('--data', data)
						let a = data.list.map((i) => ({...i, img: this.static_uri+i.avatar}));
            this.treasureBoxList = a.filter(i => i.type == 1).filter(i => i.sid === this.glbId)
            // console.log('----', this.treasureBoxList)
					
					}
				})
			},

    // _getScore(){
    //   getScore({
    //       page_no: 1,
    //       page_size: 10000,
    //     }).then((res) => {
    //     const { code, data } = res || {}
    //     if (code === 200) {
    //       this.dailyList = data.list.map(i => ({...i, count: i.cnt, checked: false}))
    //     }
    //     // console.log('---res 积分', res)
    //   })
    // },

  },
}
</script>
<style scoped lang="scss">
.page {
  position: relative;
  height: 100vh;
  width: 100%;
  background-color: #fff;
}

.content{
  .top_text {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 84rpx;
    font-size: 26rpx;
    background-color: #f3f4f5;
  }

  .avatars {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    /* height: 100vh; */
    background-color: #fff;
    padding: 11rpx 8rpx 220rpx 12rpx;

    .avatars_item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 180rpx;
      height: 220rpx;
      margin-right: 3rpx;
      margin-bottom: 5rpx;
      background: #F4F4F4;
      border-radius: 8rpx;
      .img {
        width: 120rpx !important;
        height: 120rpx !important;
        border-radius: 50%;
      }
      

      .text_count {
        font-size: 24rpx;
        font-weight: bold;
        color: #F93534;
      }

      .text_name {
        font-size: 28rpx;
        font-weight: 500;
        color: #303133;
      }
    }
  }
}

.bao_swiper_item {
  background-color: #f3f4f5;
  margin-top: 21rpx;

  .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 186rpx;
    padding: 25rpx 19rpx 25rpx 28rpx;
    background-color: #fff;
    margin-bottom: 21rpx;

    .item_left{
      display: flex;
      align-items: center;
      .image {
        width: 136rpx;
        height: 136rpx;
        border-radius: 20rpx;
        margin-right: 28rpx;
        /* background: linear-gradient(151deg, #FFFFFF 0%, #FFE39F 100%);
        border: 4rpx solid #F18E00; */
      }

      .label {
        font-size: 32rpx;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        margin-bottom: 13rpx;
      }
      .red {
        font-size: 24rpx;
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        color: #F84638;
      }
    }
    .item_right {
      font-size: 24rpx;
      font-family: PingFang-SC, PingFang-SC;
      font-weight: 500;
      color: #606265;
    }
  }
}

.bao_swiper {
  height: 100%;
}

.popup_content {
  width: 100%;
  /* height: 100%; */
  background: #FFFFFF;

  .top {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* background-color: greenyellow; */
    padding: 36rpx 0 60rpx;
    .img {
      width: 120rpx !important;
      height: 120rpx !important;
      border-radius: 50%;
      margin-bottom: 27rpx;
    }
    .text_name {
      font-size: 28rpx;
      color: #303133;
    }
  }
}

.swiper {
  height: 800rpx;

  .line {
    border: 1rpx solid #e4e5e6;
  }
  .swiper_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 21rpx 51rpx 0;
    .item_left {
      display: flex;
      align-items: center;
      justify-content: center;
      .img {
        width: 88rpx !important;
        height: 88rpx !important;
        border-radius: 50%;
      }

      .text {
        font-size: 28rpx;
        margin: 0 58rpx 0 34rpx;
      }
      .round {
        display: flex;
        justify-content: center;
        /* align-items: center; */
        width: 48rpx !important;
        height: 48rpx !important;
        border-radius: 50%;
        background-color: #FFB400;
      }
    }
  }
}

.popup_btn {
  display: flex;
  justify-content: center;
  align-items: center;

  .btn {
    width: 686rpx;
    height: 88rpx;
    background: #2979FF;
    border-radius: 48rpx;
    margin-bottom: 21rpx;
  }
}



.buttom_btn {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: 10rpx;
  background-color: #fff;

  .flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .text {
      font-size: 26rpx;
      font-weight: bold;
      color: #303133;
      margin-bottom: 22rpx;
    }
  }

  .btn {
    width: 686rpx;
    height: 88rpx;
    border-radius: 48rpx;
    margin-bottom: 14rpx;
  }
}

</style>
